<template>
    <div>
        <!--------------------------------------------------------------第二步,填写账号信息-->
        <div class="steps stepsTwo">
            <!--第二步左边-->
            <div class="TwoLeft">
                <p class="TwoDiv TwoOne" style="font-weight: 600;">登录名</p>
                <p class="TwoDiv TwoTwo" style="font-weight: 600;">请设置登录密码</p>
                <p class="TwoDiv TwoThree">登录密码</p>
                <p class="TwoDiv TwoFour">确定密码</p>
                <p class="TwoDiv TwoFive">设置会员名</p>
                <p class="TwoDiv TwoSix">会员名</p>
            </div>
            <!--第二步右边-->
            <div class="TwoRight">
                <p class="TwoDiv TwoOne" ref="loginName">13346789228</p>
                <p class="TwoDiv TwoTwo">登录时验证，保护账号信息</p>
                <div class="TwoDiv TwoThree"><input ref="TwoPasswordA" id="TwoPasswordA" type="password"placeholder="设置您的登录密码"></div>
                <div class="TwoDiv TwoFour"><input ref="TwoPasswordB" id="TwoPasswordB" @input="TwoPasswordBlur" type="password" placeholder="请再次输入您的密码"></div>
                <div class="TwoDiv TwoFive"></div>
                <div class="TwoDiv TwoSix"><input ref="RegisterTwoName" id="RegisterTwoName" type="text" placeholder="会员名一旦设置成功，无法修改"></div>
                <p class="TwoSub" @click="toThree">提交</p>
                <p :id="isTwoPassword?'TwoPasswordHintN':'TwoPasswordHintB'">两次输入密码不一致</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RegisterTwo",
        data(){
            return{
                // 存储数据,第二步数据
                RegisterTwo:{
                    "RegisterTwoPassword":"",
                    "RegisterTwoName":""
                },
                // -------------------------------绑定手机号步骤二data值
                // 判断提示两次输入密码是否一致
                isTwoPassword:true,
            }
        },
        methods:{
            // -------------------------------------------------------------------------------------------第二步事件
            // 第二次输入密码输入框change事件:判断两次输入密码是否一致
            TwoPasswordBlur(){
                console.log(this.$refs.TwoPasswordA.value);
                if(this.$refs.TwoPasswordA.value != this.$refs.TwoPasswordB.value){
                    this.isTwoPassword = false;
                }else{
                    this.isTwoPassword = true;
                }

            },
            // 进入第三步
            toThree(){
                if(this.$refs.TwoPasswordA.value==""||this.$refs.TwoPasswordB.value==""||this.$refs.RegisterTwoName.value==""){
                    this.$message.closeAll();
                    this.$message.error('请把数据填写完整!');
                    return;
                }
                if(this.$refs.TwoPasswordA.value != this.$refs.TwoPasswordB.value){
                    this.$message.closeAll();
                    this.$message.error('两次密码输入不一致!');
                    return;
                }
                this.RegisterTwo.RegisterTwoPassword = this.$refs.TwoPasswordB.value;
                this.RegisterTwo.RegisterTwoName = this.$refs.RegisterTwoName.value;
                // 本地存储第二步数据(过期时间5分钟)
                localStorage.setExpire("RegisterTwo",JSON.stringify(this.RegisterTwo),1000*60*10);
                this.$router.push("registerThree");
            },
        },
        mounted(){
            // 判断第一步数据是否还在
            if(localStorage.getExpire("RegisterOne")){
                // 给页面上的登录名赋值
                this.$refs.loginName.innerHTML = JSON.parse(localStorage.getExpire("RegisterOne")).RegisterMobile;
            }else{
                this.$message.closeAll();
                this.$message.error('数据丢失请重新填写!');
                this.$router.push("register");
                return;
            }
            // 获取存储的数据,页面赋值
            if(localStorage.getExpire("RegisterTwo")){
                var RegisterTwo = JSON.parse(localStorage.getExpire("RegisterTwo"));
                $("#TwoPasswordA").val(RegisterTwo.RegisterTwoPassword);
                $("#TwoPasswordB").val(RegisterTwo.RegisterTwoPassword);
                $("#RegisterTwoName").val(RegisterTwo.RegisterTwoName);
            }
            //在页面刷新时步骤index保存到localStorage里
            window.addEventListener("beforeunload",()=>{
                localStorage.setItem("RegisterIndex",2);
            });
        }
    }
</script>

<style scoped>
    /***************************************************************中心Two步骤二*/
    .stepsTwo{
        position: relative;
    }
    .TwoLeft, .TwoRight{
        height: 540px;
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        display: inline-block;
        margin-top: 40px;
    }
    .TwoLeft{
        width: 55%;
        text-align: right;
        float: left;
    }
    .TwoRight{
        width: 43%;
        text-align: left;
        float: right;
    }
    .TwoDiv{
        height: 60px;
        font-size: 16px;
        line-height: 60px;
        color: #333333;
    }
    .TwoOne{ }
    .TwoTwo{ }
    .TwoThree input, .TwoFour input, .TwoSix input{
        width:260px;
        height:38px;
        font-size: 16px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        text-indent: 10px;
    }
    .TwoFour{ }
    .TwoFive{
        color: #333333;
        font-weight: 600;
    }
    .TwoSix{ }
    .TwoSub{
        width:120px;
        height:40px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        font-size:20px;
        font-weight: 500;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        margin-top: 42px;
        cursor: pointer;
    }
    /*第二步两次密码输入提示*/
    #TwoPasswordHintB{
        position: absolute;
        top: 241px;
        left: 960px;
        color: red;
        font-size: 14px;
        display: block;
    }
    #TwoPasswordHintN{
        position: absolute;
        top: 241px;
        left: 960px;
        color: red;
        font-size: 14px;
        display: none;
    }

    /*浮动*/
    .left{
        float: left;
    }
    .right{
        float: right;
    }

    .colorRed{
        color: red;
    }
    .colorGreen{
        color: green;
    }
</style>
